import { useEffect, useState } from 'react';
import styles from './style.module.css'
import moment from 'moment'

import screenfull from 'screenfull'
import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons'

const title = import.meta.env.VITE_APP_TITLE

/**
 * 头部组件
 * @returns 
 */
const Header = () => {
  const [time, setTime] = useState() // 当前时间
  const [isFullScreen, setIsFullScreen] = useState(false) // 全屏状态
  const [weather, setWeather] = useState('晴') // 天气状态

  // 更新时间
  useEffect(() => {
    setTime(getTime())
    const timer = setInterval(() => {
      setTime(getTime)
    }, 1000)
    return () => {
      clearInterval(timer)
    }
  }, [])



  const getTime = () => {
    return moment().format('YYYY MM DD HH:mm:ss')
  }

  const renderFullScreenBtn = () => {
    return isFullScreen ?
      <FullscreenExitOutlined style={{fontSize: 25}} onClick={exitFullScreen} />
      : <FullscreenOutlined style={{fontSize: 25}} onClick={fullScreen} />
  }

  // 全屏
  const fullScreen = () => {
    setIsFullScreen(true)
    if (screenfull.isEnabled) {
      screenfull.request()
    }
  }

  // 退出全屏
  const exitFullScreen = () => {
    setIsFullScreen(false)
    if (screenfull.isEnabled) {
      screenfull.exit()
    }
  }

  return (
    <div className={styles.Header}>
      {/* 时间 */}
      <div className={styles.Time}>{time}</div>
      {/* 标题 */}
      <div className={styles.Title}>{title}</div>
      {/* 天气 */}
      <div className={styles.WeatherWrap}>天气： <span className={styles.Weather}>{ weather}</span></div>
      {/* 缩放按钮 */}
      <div>
        {
          renderFullScreenBtn()
        }
      </div>
      </div>
  );
}

export default Header;
